<template>
  <div>
    <el-button type="primary" @click="handleAddPaper">添加论文</el-button>
    <el-table :data="papers" style="width: 100%" stripe>
      <el-table-column prop="title" label="论文标题" width="250" />
      <el-table-column prop="author" label="作者" width="180" />
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button size="mini" @click="handleEditPaper(row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDeletePaper(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const papers = ref([
      { title: '论文1', author: '作者1' },
      { title: '论文2', author: '作者2' },
    ]);

    const handleAddPaper = () => {
      this.$message.success('添加论文功能');
    };

    const handleEditPaper = (paper) => {
      this.$message.success(`编辑论文：${paper.title}`);
    };

    const handleDeletePaper = (paper) => {
      papers.value = papers.value.filter(p => p !== paper);
      this.$message.success('删除论文成功');
    };

    return {
      papers,
      handleAddPaper,
      handleEditPaper,
      handleDeletePaper,
    };
  },
};
</script>
